<template>
  <div>
    <el-dialog
      destroy-on-close
      :title="title"
      :visible.sync="visibles"
      :close-on-click-modal="false"
      append-to-body
      width="800px"
      :show-close="this.$store.getters.userInfo.ismpwd != 1"
      @close="onClose"
    >
      <h2 style="color: red">密码必须包含大小写字母、数字、特殊字符且至少8位</h2>
      <el-form ref="queryForm" :model="queryForm" status-icon :rules="rules" label-width="100px" class="demo-queryForm">
        <el-form-item label="原密码" prop="wordold">
          <el-input v-model="queryForm.wordold" type="password" autocomplete="off" show-password></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="wordnew">
          <el-input v-model="queryForm.wordnew" type="password" autocomplete="off" show-password></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="wordnewConfirm">
          <el-input v-model="queryForm.wordnewConfirm" type="password" autocomplete="off" show-password></el-input>
        </el-form-item>
        <!-- <el-form-item label="验证码" prop="checkcode">
          <el-input v-model="queryForm.checkcode" type="input" autocomplete="off"> </el-input>
          <el-button v-show="countShow" type="warning" @click="debounceGetCheckCode"> 获取验证码 </el-button>
          <el-button v-show="!countShow" type="warning" disabled> 获取验证码({{ count }}s) </el-button>
        </el-form-item> -->
      </el-form>
      <div slot="footer">
        <el-button type="info" @click="onSubmit">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { ModifyPassWord, sendMsg } from '@/api/settings/denglurenyuan'

export default {
  props: ['visiblePaswd', 'paswdid'],

  data() {
    var regexp = new RegExp(
      '^(?![A-Za-z0-9]+$)(?![a-z0-9\\W]+$)(?![A-Za-z\\W]+$)(?![A-Z0-9\\W]+$)[a-zA-Z0-9\\W]{8,20}$'
    )
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else if (!regexp.test(value)) {
        callback(new Error('密码必须包含大小写字母、数字、特殊字符且至少8位'))
      } else {
        if (this.queryForm.wordnewConfirm !== '') {
          this.$refs.queryForm.validateField('wordnewConfirm')
        }
        callback()
      }
    }
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.queryForm.wordnew) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }

    return {
      queryForm: {
        wordold: '',
        wordnew: '',
        wordnewConfirm: '',
        checkcode: ''
      },
      countShow: true,
      count: '',
      timer: null,
      visibles: this.visiblePaswd,
      id: this.Paswdid,
      title: '修改密码',
      rules: {
        wordold: [{ required: true, message: '请输入原密码', trigger: 'blur' }],
        wordnew: [{ required: true, validator: validatePass, trigger: 'blur' }],
        wordnewConfirm: [{ required: true, validator: validatePass2, trigger: 'blur' }]
        // checkcode: [{ required: true, message: '请输入验证码', trigger: 'blur' }]
      },
      // debounceGetCheckCode: this.$debounce(this.getCheckCode, 200)
      debounceGetCheckCode: this.getCheckCode
    }
  },
  // 这里用watch方法来监听父组件传过来的值，来实现实时更新
  watch: {
    visiblePaswd(val) {
      // message即为父组件的值，val参数为值
      this.visibles = val // 将父组件的值赋给childrenMessage 子组件的值
    },
    Paswdid(val) {
      // message即为父组件的值，val参数为值
      this.id = val // 将父组件的值赋给childrenMessage 子组件的值
    }
  },

  methods: {
    async getCheckCode() {
      const TIME_COUNT = 60
      if (!this.timer) {
        this.count = TIME_COUNT
        this.countShow = false
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= TIME_COUNT) {
            this.count--
          } else {
            this.countShow = true
            clearInterval(this.timer)
            this.timer = null
          }
        }, 1000)
      }
      var data = { userid: this.$store.getters.userInfo.id }
      const result = await sendMsg(data)
      if (result.success) {
        var maskphone = this.$store.getters.userInfo.maskphone
        this.$message.success('验证码已发送至:' + maskphone + ',请注意查收.如手机号已变更请联系管理员进行修改')
      } else {
        this.countShow = true
        this.$message.error(result.message)
      }
    },
    // 点击关闭给父组件传值
    onClose() {
      if (this.$store.getters.userInfo) this.queryForm = {}
      this.$emit('fatherPaswd')
    },
    async onSubmit() {
      this.$refs.queryForm.validate(async valid => {
        if (valid) {
          this.queryForm.userid = this.id
          console.log(this.queryForm)
          if (this.queryForm.wordold == this.queryForm.wordnew) return this.$message.warning('新密码不能与原密码相同')
          const res = await ModifyPassWord(this.queryForm)
          if (res.success) {
            this.$message.success(res.message)
            this.$emit('fatherPaswd')
            this.$store.dispatch('user/LogOut').then(() => {
              this.$router.push('/login')
              this.$message.success('密码修改成功,请重新登录')
            })
            return
          } else {
            return this.$message.error(res.message)
          }
        }
      })
    }
  }
}
</script>

<style></style>
